// 全部_页面
import PropTypes from "prop-types"
import React, { memo, useEffect } from "react"

import { EntireWrapper } from "./style"
import EntireFilter from "./c-cpns/entire-filter"
import EntireRooms from "./c-cpns/entire-rooms"
import EntirePagination from "./c-cpns/entire-pagination"
import { useDispatch, useSelector } from "react-redux"
import { fetchEntireData } from "@/store/modules/entire"
import { changeHeaderConfig } from "@/store/modules/main"

const Entire = memo((props) => {
    // 从redux中获取数据
    const { roomList, totalCount, currentPage, isloading } = useSelector(
        (state) => state.entire
    )
    const dispatch = useDispatch()

    //  异步获取
    useEffect(() => {
        dispatch(fetchEntireData())
        // 固定头部
        dispatch(changeHeaderConfig(true))
    }, [dispatch])
    return (
        <EntireWrapper>
            <div className="filter">
                <EntireFilter />
            </div>
            <div className="rooms">
                <EntireRooms
                    infoData={roomList}
                    totalCount={totalCount}
                    isloading={isloading}
                />
            </div>
            <div className="pagination">
                <EntirePagination
                    totalCount={totalCount}
                    currentPage={currentPage}
                    roomList={roomList}
                />
            </div>
        </EntireWrapper>
    )
})

Entire.propTypes = {}

export default Entire
